<template>
    <view class="search-container">
      <view class="search-box">
        <!-- 使用 uni-ui 提供的搜索组件 -->
        <uni-search-bar
          @input="input"
          :radius="100"
          cancelButton="none"
        ></uni-search-bar>
      </view>
    </view>
</template>
<script>
export default {
  data(){
    return{
      timerId:null,
      keyword:'',
      searchResults:[]
    }
  },
  methods:{
    input(e){
      clearTimeout(this.timerId)
      this.timerId = setTimeout(() => {
        this.keyword = e
        this.search()
      },500)
    },
    async search(){
        if (this.keyword.trim() === '') {
        this.searchResults = []
        return
      }
      const res = await uni.$request({
        url:'goods/qsearch',
        data:{
          query:this.keyword
        }
      })
      console.log(res);
      if(res.meta.status === 200){
        this.searchResults = res.message
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.search-container{
    .search-box {
      position: sticky;
      top: 0;
      z-index: 999;
      ::v-deep .uni-searchbar {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
        position: relative;
        padding: 16rpx;
        /* 将默认的 #FFFFFF 改为 #C00000 */
        background-color: #c00000;
      }
    }
}
</style>